<template>
  <div class="chat-container">
    <div class="chat-header">
      <h1>智能问答</h1>
    </div>
    <div class="chat-messages">
      <div v-for="(msg, index) in messages" :key="index" :class="['chat-message', msg.type]">
        <div class="message-content">{{ msg.text }}</div>
      </div>
    </div>
    <form class="message-form" @submit.prevent="ask">
      <el-input
          type="text"
          v-model="question"
          placeholder="输入消息..."
          autocomplete="off"
          class="message-input"
      />
      <el-button @click="ask" type="primary">发送</el-button>
      <el-button @click="reset" type="success">重置</el-button>
    </form>
  </div>
</template>

<script>

//接入ai
export default {
  name: 'Advice',
  data() {
    return {
      question: '',  // 用户输入的问题
      messages: [],  // 消息列表
      loading: false  // 加载状态
    };
  },
  methods: {
    ask() {
      if (this.question.trim() === '') {
        this.$message.warning('请输入消息');
        return;
      }

      // 添加用户消息到消息列表
      this.messages.push({text: this.question, type: 'user'});
      const userQuestion = this.question;  // 备份用户问题
      this.question = '';  // 清空输入框
      this.loading = true;

      // 发送 API 请求
      this.$axios.post('http://localhost:8003/test/ask?question=' + userQuestion).then(res => {
        // 添加机器人的回复到消息列表
        this.messages.push({text: res.data.result, type: 'bot'});
        this.loading = false;
      }).catch(error => {
        console.error('Error', error);
        this.loading = false;
      });
    },
    reset() {
      this.question = '';
      this.messages = [];
      this.loading = false;
    }
  }
}


</script>

<style scoped>
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #e0e0e0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chat-container {
  height: 80vh;
  width: 80vw;
  max-width: 1000px;
  max-height: 800px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
}

.chat-header {
  text-align: center;
  margin-bottom: 20px;
}

.chat-header h1 {
  font-size: 28px;
  color: #333;
  margin: 0;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 20px;
  background-color: #f4f4f4;
}

.chat-message {
  margin-bottom: 15px;
  display: flex;
  align-items: flex-start;
}

.chat-message.user {
  justify-content: flex-end;
}

.chat-message.user .message-content {
  background-color: #cce5ff;
  padding: 12px;
  border-radius: 12px;
  max-width: 75%;
  word-wrap: break-word;
}

.chat-message.bot {
  justify-content: flex-start;
}

.chat-message.bot .message-content {
  background-color: #ffffff;
  padding: 100 px;
  border-radius: 12px;
  max-width: 75%;
  word-wrap: break-word;
}

.message-form {
  display: flex;
  align-items: center;
  border-top: 1px solid #ddd;
  padding-top: 10px;
}

.message-input {
  flex: 1;
  margin-right: 10px;
  padding: 10px;
  border-radius: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.el-button {
  border-radius: 20px;
}

.el-button.primary {
  background-color: #007bff;
  color: #fff;
}

.el-button.success {
  background-color: #28a745;
  color: #fff;
}

.el-button.primary:hover {
  background-color: #0056b3;
}

.el-button.success:hover {
  background-color: #218838;
}
</style>
